<template>
	<view class="c-popup">
		<view :style="ifshow&&position=='center'?'opacity:1;z-index:999;':'opacity:0;z-index:-1;'" class="c-popup01">
			<view class="c-popup01-bg" @click="close" v-if="overlay"></view>
			<view class="c-popup01-content">
				<slot />
				<c-icon v-if="icon" class="c-icon" :name="iconName" :size="iconSize" :color="iconColor" @click.native="close"></c-icon>
			</view>
		</view>
		<view class="c-popup02 c-popup02-top" :style="ifshow&&position=='top'?'opacity:1;z-index:999;':'opacity:0;z-index:-1;transition: all 0s ease-in-out .3s;'">
			<view class="c-popup01-bg" @click="close"></view>
			<view class="c-popup02-content" :style="ifshow?'transform: translateY(0%);':'transform: translateY(-100%);'">
				<slot />
				<c-icon v-if="icon" class="c-icon" :name="iconName" :size="iconSize" :color="iconColor" @click.native="close"></c-icon>
			</view>
		</view>
		<view class="c-popup02 c-popup02-bottom" :style="ifshow&&position=='bottom'?'opacity:1;z-index:999;':'opacity:0;z-index:-1;transition: all 0s ease-in-out .3s;'">
			<view class="c-popup01-bg" @click="close"></view>
			<view class="c-popup02-content" :style="ifshow?'transform: translateY(0%);':'transform: translateY(100%);'">
				<slot />
				<c-icon v-if="icon" class="c-icon" :name="iconName" :size="iconSize" :color="iconColor" @click.native="close"></c-icon>
			</view>
		</view>
		<view class="c-popup02 c-popup02-left" :style="ifshow&&position=='left'?'opacity:1;z-index:999;':'opacity:0;z-index:-1;transition: all 0s ease-in-out .3s;'">
			<view class="c-popup01-bg" @click="close"></view>
			<view class="c-popup02-content" :style="ifshow?'transform: translateX(0%);':'transform: translateX(-100%);'">
				<slot />
				<c-icon v-if="icon" class="c-icon" :name="iconName" :size="iconSize" :color="iconColor" @click.native="close"></c-icon>
			</view>
		</view>
		<view class="c-popup02 c-popup02-right" :style="ifshow&&position=='right'?'opacity:1;z-index:999;':'opacity:0;z-index:-1;transition: all 0s ease-in-out .3s;'">
			<view class="c-popup01-bg" @click="close"></view>
			<view class="c-popup02-content" :style="ifshow?'transform: translateX(0%);':'transform: translateX(100%);'">
				<slot />
				<c-icon v-if="icon" class="c-icon" :name="iconName" :size="iconSize" :color="iconColor" @click.native="close"></c-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			show:{
				type:Boolean,
				default:false
			},
			overlay:{ //是否显示遮罩层
				type:Boolean,
				default:true
			},
			position:{
				type:String,
				default:"center"
			},
			icon:{
				type:Boolean,
				default:false
			},
			iconName:{
				type:String,
				default:"close"
			},
			iconSize:{
				type:[String,Number],
				default:16
			},
			iconColor:{
				type:String,
				default:'#323233'
			}
		},
		data(){
			return{
				ifshow:false
			}
		},
		created() {
			console.log(this.overlay)
		},
		watch:{
			show:{
				handler(e){
					this.ifshow = e;
				},
				immediate:true
			}
		},
		methods:{
			close:function(){
				this.$emit("closePopup")
			}
		}
	}
</script>

<style scoped>
	.c-popup{
		
	}
	.c-popup01{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		transition: all .3s ease-in-out;
	}
	.c-popup01-bg{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.7);
	}
	.c-popup01-content{
		background: #FFFFFF;
		/* min-width: 260rpx;
		min-height: 160rpx; */
		padding: 50rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		z-index: 999;
		text-align: center;
		position: relative;
	}
	.c-popup02{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		max-height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.c-popup02-top .c-popup02-content{
		width: calc(100% - 60rpx);
		padding: 30rpx;
		position: absolute;
		left: 0;
		top: 0;
		background: #FFFFFF;
		transition: all .3s ease-in-out;
	}
	.c-popup02-bottom .c-popup02-content{
		width: calc(100% - 60rpx);
		padding: 30rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #FFFFFF;
		transition: all .3s ease-in-out;
	}
	.c-popup02-left .c-popup02-content{
		height: calc(100% - 60rpx);
		padding: 30rpx;
		position: absolute;
		left: 0;
		top: 0;
		background: #FFFFFF;
		transition: all .3s ease-in-out;
	}
	.c-popup02-right .c-popup02-content{
		height: calc(100% - 60rpx);
		padding: 30rpx;
		position: absolute;
		right: 0;
		top: 0;
		background: #FFFFFF;
		transition: all .3s ease-in-out;
	}
	.c-icon{
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
</style>